import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import "./index.mod.css"
import speakingImg from '../../img/speaking.jpeg';
import speechingGif from '../../img/speeching.gif';
import answerModelIcon from '../../img/answer-model.svg';
import chatModelIcon from '../../img/chat-model.svg';
import nightModelIcon from '../../img/night-model.svg';

const App: React.FC = () => {
  const [isGifShowing, setIsGifShowing] = useState(false);
  const [isDayTheme, setIsDayTheme] = useState(true);
  const { t, i18n } = useTranslation();

  const handleImageClick = () => {
    setIsGifShowing(!isGifShowing);
  };

  const handleThemeToggle = () => {
    setIsDayTheme(!isDayTheme);
  };

  const handleLanguageChange = () => {
    const newLang = i18n.language === 'en' ? 'zh' : 'en';
    i18n.changeLanguage(newLang);
  };

  return (
    <div className='box'>
      <div className={`top ${isDayTheme ? 'day-theme' : 'night-theme'}`}>
        <div className="top-buttons">
          <button className="top-btn">{t('enter3D')}</button>
          <button className="top-btn" onClick={handleThemeToggle}>{t('themeSwitch')}</button>
          <button className="top-btn" onClick={handleLanguageChange}>{t('language')}</button>
        </div>
      </div>
      <div className={`bottom ${isDayTheme ? 'bottom-day' : 'bottom-night'}`}>
        <div className="left"></div>
        <div className={`right ${isDayTheme ? 'right-day' : 'right-night'}`}>
          <div className="model-images">
            <img src={answerModelIcon} alt="answer model" className="model-icon" />
            <img src={chatModelIcon} alt="chat model" className="model-icon" />
            <img src={nightModelIcon} alt="night model" className="model-icon" />
          </div>
        </div>
      </div>
      <div className="speaking-container">
        <img
          src={isGifShowing ? speechingGif : speakingImg}
          alt="speaking"
          className="speaking-gif"
          onClick={handleImageClick}
          style={{ cursor: 'pointer' }}
        />
      </div>
      <div className={`bd ${isDayTheme ? 'bd-day' : 'bd-night'}`}></div>
    </div>
  );
};

export default App;